<template>
  <main class="w-full h-full dark:bg-black p-4">
    <use-table
      :columns="columns"
      :search-select-option="searchSelectOption"
      :all-data="allData"
      v-model:selected-row-key="selectedRowKey"
      :personalized="true"
      :loading="loading"
      :total="total"
      @delete-select-user="deleteRadio"
      v-model:visible="modifyRadioFormVisible"
      @modifyUserData="openModifyRadioForm"
    >
      <template #title> 单选题 </template>
      <template #function>
        <a-tooltip placement="bottom">
          <template #title>
            <span>添加题目</span>
          </template>
          <div class="cursor-pointer text-lg text-blue-500 mr-2" @click="openAddRadioForm">
            <plus-circle-outlined />
          </div>
        </a-tooltip>
        <a-tooltip placement="bottom">
          <template #title>
            <span>删除选中题目</span>
          </template>
          <div class="cursor-pointer text-lg text-red-500" @click="deleteRadio">
            <close-circle-outlined />
          </div>
        </a-tooltip>
      </template>
    </use-table>
    <modify-form
      v-model:visible="addRadioFormVisible"
      modal-title-text="添加单选题"
      @handleOk="completeAddRadioForm"
    >
      <template #container>
        <div class="flex items-center">
          <span class="w-22 text-right"> 题目名称： </span>
          <a-input v-model:value="addRadioFormData.single_name" />
        </div>
        <div class="flex items-center mt-3">
          <span class="w-22 text-right"> 选项A： </span>
          <a-input v-model:value="addRadioFormData.A" />
        </div>
        <div class="flex items-center mt-3">
          <span class="w-22 text-right"> 选项B： </span>
          <a-input v-model:value="addRadioFormData.B" />
        </div>
        <div class="flex items-center mt-3">
          <span class="w-22 text-right"> 选项C： </span>
          <a-input v-model:value="addRadioFormData.C" />
        </div>
        <div class="flex items-center mt-3">
          <span class="w-22 text-right"> 选项D： </span>
          <a-input v-model:value="addRadioFormData.D" />
        </div>
        <div class="flex items-center mt-3">
          <span class="w-22 text-right"> 正确答案： </span>
          <a-radio-group v-model:value="addRadioFormData.right_key">
            <a-radio :style="radioStyle" v-for="i in radioGroup" :value="i">{{ i }}</a-radio>
          </a-radio-group>
        </div>
        <div class="flex items-center mt-3">
          <span class="w-22 text-right"> 所属科目： </span>
          <a-select v-model:value="addRadioFormData.subject_name" style="width: 180px">
            <a-select-option v-for="i in subjectList" :value="i.subject_name">
              {{ i.subject_name }}
            </a-select-option>
          </a-select>
        </div>
      </template>
    </modify-form>
    <modify-form
      v-model:visible="modifyRadioFormVisible"
      modal-title-text="修改单选题信息"
      @handleOk="completeModifyRadioForm"
    >
      <template #container>
        <div class="flex items-center">
          <span class="w-22 text-right"> 题目名称： </span>
          <a-input v-model:value="modifyRadioForm.single_name" />
        </div>
        <div class="flex items-center mt-3">
          <span class="w-22 text-right"> 选项A： </span>
          <a-input v-model:value="modifyRadioForm.A" />
        </div>
        <div class="flex items-center mt-3">
          <span class="w-22 text-right"> 选项B： </span>
          <a-input v-model:value="modifyRadioForm.B" />
        </div>
        <div class="flex items-center mt-3">
          <span class="w-22 text-right"> 选项C： </span>
          <a-input v-model:value="modifyRadioForm.C" />
        </div>
        <div class="flex items-center mt-3">
          <span class="w-22 text-right"> 选项D： </span>
          <a-input v-model:value="modifyRadioForm.D" />
        </div>
        <div class="flex items-center mt-3">
          <span class="w-22 text-right"> 正确答案： </span>
          <a-radio-group v-model:value="modifyRadioForm.right_key">
            <a-radio :style="radioStyle" v-for="i in radioGroup" :value="i">{{ i }}</a-radio>
          </a-radio-group>
        </div>
        <div class="flex items-center mt-3">
          <span class="w-22 text-right"> 所属科目： </span>
          <a-select v-model:value="modifyRadioForm.subject_name" style="width: 180px">
            <a-select-option v-for="i in subjectList" :value="i.subject_name">
              {{ i.subject_name }}
            </a-select-option>
          </a-select>
        </div>
      </template>
    </modify-form>
  </main>
</template>

<script setup lang="ts">
  import { getRadioList, deleteSelectRadio, addRadio, updateRadio } from '@/api/examination';
  import { getSubject } from '@/api/student';
  import { AddRadioData, RadioData, SubJect } from '@/utils/interface';
  import { CloseCircleOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';

  let allData = ref<RadioData[]>([]);
  let loading = ref(false);
  let total = ref(0);
  // 勾选的数据的key
  let selectedRowKey = ref<number[] | string[]>([]);
  // 搜索框下拉列表
  const searchSelectOption: { value: string; label: string }[] = [
    {
      value: 'major_name',
      label: '专业名称',
    },
    {
      value: 'subject_name',
      label: '科目名称',
    },
    {
      value: 'single_name',
      label: '题目名称',
    },
  ];
  const columns = [
    {
      title: '题目名称',
      dataIndex: 'single_name',
      align: 'center',
      width: 140,
      ellipsis: true,
    },
    {
      title: '所属科目',
      dataIndex: 'subject_name',
      align: 'center',
      width: 140,
      ellipsis: true,
    },
    {
      title: '所属专业',
      dataIndex: 'major_name',
      align: 'center',
      width: 140,
      ellipsis: true,
    },
    {
      title: '答案A',
      dataIndex: 'A',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '答案B',
      dataIndex: 'B',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '答案C',
      dataIndex: 'C',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '答案D',
      dataIndex: 'D',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '正确答案',
      dataIndex: 'right_key',
      align: 'center',
      width: 80,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      align: 'center',
      width: 80,
    },
  ];
  const getAllRadio = async () => {
    loading.value = true;
    const { data } = await getRadioList();
    allData.value = data.filter((item: RadioData) => item.status !== 0) as RadioData[];
    total.value = data.length;
    loading.value = false;
  };
  let subjectList = ref<SubJect[]>([]);
  getAllRadio();
  getSubject().then((res) => {
    subjectList.value = res.data as SubJect[];
  });
  const deleteRadio = async (key: number[] | string[] | any) => {
    const selectKey = Array.isArray(key) ? key : selectedRowKey.value;
    if (selectKey.length === 0) {
      message.warning('请选择要删除的题目');
      return;
    }
    const res = await deleteSelectRadio(selectKey);
    if (res.status === 200) {
      message.success('删除成功');
      getAllRadio();
    }
  };

  const radioStyle = reactive({
    display: 'flex',
    height: '30px',
    lineHeight: '30px',
  });
  const radioGroup = ['A', 'B', 'C', 'D'];
  let addRadioFormVisible = ref(false);
  let addRadioFormData = ref<AddRadioData>({
    single_name: '',
    A: '',
    B: '',
    C: '',
    D: '',
    right_key: '',
    subject_name: '',
  });
  const openAddRadioForm = () => {
    addRadioFormVisible.value = true;
  };
  const completeAddRadioForm = async () => {
    const { single_name, right_key, subject_name, A, B, C, D } = toRefs(addRadioFormData.value);
    if (
      !single_name.value ||
      !right_key.value ||
      !subject_name.value ||
      !A.value ||
      !B.value ||
      !C.value ||
      !D.value
    ) {
      message.warning('请填写完整信息');
      return;
    }
    const { status, msg } = (await addRadio(addRadioFormData.value)) as any;
    if (status === 200) {
      message.success(msg);
      addRadioFormData.value = {
        single_name: '',
        A: '',
        B: '',
        C: '',
        D: '',
        right_key: '',
        subject_name: '',
      };
      console.log(addRadioFormData);

      addRadioFormVisible.value = false;
      await getAllRadio();
    }
  };

  let modifyRadioFormVisible = ref(false);
  let modifyRadioForm = ref<RadioData>({
    single_name: '',
    A: '',
    B: '',
    C: '',
    D: '',
    right_key: '',
    subject_name: '',
    key: 0,
  });
  const openModifyRadioForm = (key: number) => {
    const clickUser = allData.value.find((item: any) => item.key === key) as any;
    console.log(clickUser);
    if (clickUser !== undefined) {
      modifyRadioForm.value = {
        ...clickUser,
      };
      console.log(modifyRadioForm.value);
      modifyRadioFormVisible.value = true;
    } else message.error('发生错误');
  };
  const completeModifyRadioForm = async () => {
    const { single_name, right_key, subject_name, A, B, C, D, key } = modifyRadioForm.value;
    if (!single_name || !right_key || !subject_name || !A || !B || !C || !D) {
      message.warning('请填写完整信息');
      return;
    }
    const { status, msg } = (await updateRadio({
      id: key as number,
      single_name,
      right_key,
      subject_name,
      A,
      B,
      C,
      D,
    })) as any;
    if (status === 200) {
      message.success(msg);
      await getAllRadio();
      modifyRadioFormVisible.value = false;
    }
  };
</script>

<style scoped>
  :deep(.ant-radio-group-default) {
    @apply flex;
  }
</style>
